<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本与知识点关联管理</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .tree-line {
                @apply border-l-2 border-dashed border-gray-200 ml-3 pl-4;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-0 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>睿途题库</span>
                </h1>
            </div>

            <div class="hidden md:flex items-center space-x-6">
                <!-- 控制面板 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-tachometer mr-1"></i> 控制面板
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-dashboard mr-2"></i> 仪表盘
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 数据概览
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tasks mr-2"></i> 任务管理
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 教材管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                        <i class="fa fa-book mr-1"></i> 教材管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-list mr-2"></i> 版本管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-sitemap mr-2"></i> 章节管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                <i class="fa fa-exchange mr-2"></i> 版本对比
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 题库管理 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-database mr-1"></i> 题库管理
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-question-circle mr-2"></i> 题目管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-tags mr-2"></i> 标签管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-filter mr-2"></i> 筛选规则
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-upload mr-2"></i> 批量导入
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 组卷系统 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-files-o mr-1"></i> 组卷系统
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-magic mr-2"></i> 智能组卷
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-edit mr-2"></i> 手动组卷
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-copy mr-2"></i> 试卷模板
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-history mr-2"></i> 历史试卷
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 数据分析 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-bar-chart mr-1"></i> 数据分析
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-pie mr-2"></i> 学习分析
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-chart-line mr-2"></i> 趋势分析
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-file-text mr-2"></i> 报告生成
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 系统设置 -->
                <div class="relative group">
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                        <i class="fa fa-cog mr-1"></i> 系统设置
                        <i class="fa fa-angle-down ml-1 text-xs"></i>
                    </a>
                    <div class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-users mr-2"></i> 用户管理
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-shield mr-2"></i> 权限设置
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-database mr-2"></i> 数据备份
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                <i class="fa fa-cogs mr-2"></i> 系统配置
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索教材、章节或知识点..."
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden mt-4">
        <!-- 左侧边栏 - 教材版本与章节导航 -->
        <aside id="sidebar" class="w-75 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="font-bold text-lg">教材版本导航</h2>
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>全部学科</option>
                            <option>数学</option>
                            <option>物理</option>
                            <option>化学</option>
                            <option>生物</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>

                <div class="relative">
                    <input type="text" placeholder="搜索章节..."
                           class="w-full pl-8 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-1 focus:ring-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <!-- 教材版本选择 -->
            <div class="p-4 border-b">
                <h3 class="font-medium text-sm text-gray-500 mb-2">选择教材版本</h3>
                <div class="space-y-2">
                    <div class="relative">
                        <select id="version-selector" class="w-full appearance-none bg-gray-100 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                            <option value="RJ-2023">人教版 2023版</option>
                            <option value="SX-2022">苏教版 2022版</option>
                            <option value="BS-2023">北师大版 2023版</option>
                            <option value="HK-2024">沪科版 2024版</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>

                    <div class="flex space-x-2 mt-2">
                        <button class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-lg hover:bg-primary/20 transition-colors flex-1">
                            <i class="fa fa-plus mr-1"></i> 添加新版本
                        </button>
                        <button class="text-xs bg-gray-100 text-gray-600 px-3 py-1 rounded-lg hover:bg-gray-200 transition-colors">
                            <i class="fa fa-refresh mr-1"></i> 同步
                        </button>
                    </div>
                </div>
            </div>

            <!-- 章节树形导航 -->
            <div class="p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-medium text-sm text-gray-500">章节结构</h3>
                    <div class="flex space-x-1">
                        <button id="expand-all" class="text-xs text-gray-500 hover:text-primary">展开</button>
                        <span class="text-gray-300">|</span>
                        <button id="collapse-all" class="text-xs text-gray-500 hover:text-primary">收起</button>
                    </div>
                </div>

                <div class="space-y-1">
                    <!-- 章节1 -->
                    <div class="chapter-item">
                        <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                            <div class="flex items-center">
                                <i class="fa fa-book text-primary mr-2"></i>
                                <span class="font-medium">第一章 集合与常用逻辑用语</span>
                            </div>
                            <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                        </div>

                        <div class="pl-6 mt-1 space-y-1">
                            <div class="section-item">
                                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                                    <div class="flex items-center">
                                        <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                                        <span>1.1 集合的含义与表示</span>
                                    </div>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">4课时</span>
                                </div>

                                <div class="pl-6 mt-1 space-y-1 tree-line">
                                    <div class="knowledge-item bg-primary/5 border-l-2 border-primary p-2 rounded-r-lg cursor-pointer hover:bg-primary/10 transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-primary mr-2"></i>
                                                <span>集合的定义</span>
                                            </div>
                                            <span class="text-xs text-gray-500">3题</span>
                                        </div>
                                    </div>

                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>集合的表示方法</span>
                                            </div>
                                            <span class="text-xs text-gray-500">5题</span>
                                        </div>
                                    </div>

                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>元素与集合的关系</span>
                                            </div>
                                            <span class="text-xs text-gray-500">4题</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-item">
                                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                                    <div class="flex items-center">
                                        <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                                        <span>1.2 集合间的基本关系</span>
                                    </div>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">3课时</span>
                                </div>

                                <div class="pl-6 mt-1 space-y-1 tree-line hidden">
                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>子集与真子集</span>
                                            </div>
                                            <span class="text-xs text-gray-500">6题</span>
                                        </div>
                                    </div>

                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>集合相等</span>
                                            </div>
                                            <span class="text-xs text-gray-500">2题</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 章节2 -->
                    <div class="chapter-item">
                        <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                            <div class="flex items-center">
                                <i class="fa fa-book text-primary mr-2"></i>
                                <span>第二章 一元二次函数、方程和不等式</span>
                            </div>
                            <i class="fa fa-angle-right text-gray-400 transition-transform"></i>
                        </div>

                        <div class="pl-6 mt-1 space-y-1 hidden">
                            <div class="section-item">
                                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                                    <div class="flex items-center">
                                        <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                                        <span>2.1 等式性质与不等式性质</span>
                                    </div>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">4课时</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 章节3 -->
                    <div class="chapter-item">
                        <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                            <div class="flex items-center">
                                <i class="fa fa-book text-primary mr-2"></i>
                                <span>第三章 函数的概念与性质</span>
                            </div>
                            <i class="fa fa-angle-right text-gray-400 transition-transform"></i>
                        </div>

                        <div class="pl-6 mt-1 space-y-1 hidden">
                            <div class="section-item">
                                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                                    <div class="flex items-center">
                                        <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                                        <span>3.1 函数的概念</span>
                                    </div>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">5课时</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">教材版本管理</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">人教版 2023版</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-gray-700">第一章 集合与常用逻辑用语</span>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary font-medium">集合的定义</span>
                </div>

                <!-- 内容标题区 -->
                <div class="flex flex-col md:flex-row md:items-center justify-between">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">集合的定义</h2>
                        <p class="text-gray-500 mt-1">理解集合的含义，掌握集合中元素的特性</p>
                    </div>

                    <div class="flex space-x-3 mt-4 md:mt-0">
                        <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fa fa-share-alt mr-2"></i> 分享知识点
                        </button>
                        <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fa fa-edit mr-2"></i> 编辑知识点
                        </button>
                        <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-plus mr-2"></i> 添加题目
                        </button>
                    </div>
                </div>

                <!-- 内容卡片区 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 左侧知识点详情 -->
                    <div class="lg:col-span-2">
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-bold text-lg">知识点详情</h3>
                                <div class="flex space-x-2">
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">必修课程</span>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">核心知识点</span>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">课标要求</h4>
                                    <p class="text-gray-600">通过实例，了解集合的含义，体会元素与集合的"属于"关系；能选择自然语言、图形语言、集合语言（列举法或描述法）描述不同的具体问题，感受集合语言的意义和作用。</p>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">知识要点</h4>
                                    <ol class="list-decimal list-inside space-y-2 text-gray-600">
                                        <li>集合的定义：一般地，我们把研究对象统称为元素，把一些元素组成的总体叫做集合（简称为集）。</li>
                                        <li>集合中元素的特性：确定性、互异性、无序性。</li>
                                        <li>元素与集合的关系：属于（∈）和不属于（∉）。</li>
                                        <li>常用数集及其记法：自然数集N，正整数集N*或N+，整数集Z，有理数集Q，实数集R。</li>
                                    </ol>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">教学建议</h4>
                                    <p class="text-gray-600">
                                        1. 教学中应结合生活实例（如"学校高一年级全体学生"）帮助学生理解集合的概念；<br>
                                        2. 通过反例（如"身材较高的人"）说明集合中元素的确定性；<br>
                                        3. 建议用2课时完成本知识点教学，其中1课时讲解概念，1课时进行课堂练习。
                                    </p>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">关联知识点</h4>
                                    <div class="flex flex-wrap gap-2">
                                        <a href="#" class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors">
                                            集合的表示方法
                                        </a>
                                        <a href="#" class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors">
                                            元素与集合的关系
                                        </a>
                                        <a href="#" class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors">
                                            集合间的基本关系
                                        </a>
                                        <a href="#" class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">
                                            查看全部(8)
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 关联题目 -->
                        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-bold text-lg">关联题目</h3>
                                <div class="flex items-center space-x-2">
                                    <span class="text-sm text-gray-500">共3题</span>
                                    <div class="relative">
                                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                            <option>全部题型</option>
                                            <option>选择题</option>
                                            <option>填空题</option>
                                            <option>解答题</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                    </div>
                                    <div class="relative">
                                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                            <option>难度不限</option>
                                            <option>基础</option>
                                            <option>中等</option>
                                            <option>较难</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <!-- 题目1 -->
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/50 transition-colors">
                                    <div class="flex items-start justify-between mb-2">
                                        <div class="flex items-center">
                                            <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full mr-2">选择题</span>
                                            <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">基础</span>
                                        </div>
                                        <div class="flex space-x-2">
                                            <button class="text-gray-400 hover:text-primary transition-colors">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <p class="text-gray-700 mb-3">下列各组对象中不能构成集合的是（　　）</p>

                                    <div class="pl-4 space-y-1 text-gray-600 mb-3">
                                        <p>A. 北京尼山世界文明论坛的全体参会人员</p>
                                        <p>B. 2024年高考数学试卷中的所有难题</p>
                                        <p>C. 所有的正方形</p>
                                        <p>D. 清华大学2024年入学的全体学生</p>
                                    </div>

                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="text-xs text-gray-500 mr-2">正确答案：</span>
                                            <span class="text-sm font-medium">B</span>
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            <span>难度系数：0.85</span>
                                            <span class="mx-2">|</span>
                                            <span>答题正确率：87%</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 题目2 -->
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/50 transition-colors">
                                    <div class="flex items-start justify-between mb-2">
                                        <div class="flex items-center">
                                            <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full mr-2">填空题</span>
                                            <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded-full">中等</span>
                                        </div>
                                        <div class="flex space-x-2">
                                            <button class="text-gray-400 hover:text-primary transition-colors">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <p class="text-gray-700 mb-3">用列举法表示集合M={m | m ∈ Z，且10/(m+1) ∈ Z} = ______．</p>

                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="text-xs text-gray-500 mr-2">正确答案：</span>
                                            <span class="text-sm font-medium">{-11, -6, -3, -2, 0, 1, 4, 9}</span>
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            <span>难度系数：0.62</span>
                                            <span class="mx-2">|</span>
                                            <span>答题正确率：63%</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- 题目3 -->
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-primary/50 transition-colors">
                                    <div class="flex items-start justify-between mb-2">
                                        <div class="flex items-center">
                                            <span class="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded-full mr-2">解答题</span>
                                            <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-0.5 rounded-full">中等</span>
                                        </div>
                                        <div class="flex space-x-2">
                                            <button class="text-gray-400 hover:text-primary transition-colors">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <p class="text-gray-700 mb-3">已知集合A={x | ax² - 3x + 2 = 0，a ∈ R}，若A中至多只有一个元素，求a的取值范围．</p>

                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="text-xs text-gray-500 mr-2">正确答案：</span>
                                            <span class="text-sm font-medium">a ≥ 9/8 或 a = 0</span>
                                        </div>
                                        <div class="text-xs text-gray-500">
                                            <span>难度系数：0.58</span>
                                            <span class="mx-2">|</span>
                                            <span>答题正确率：55%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 text-center">
                                <button class="text-primary hover:text-primary/80 font-medium">
                                    查看全部关联题目 <i class="fa fa-angle-right ml-1"></i>
                                </button>
                            </div>
                        </div>

                        <!-- 版本对比 -->
                        <!--<div class="bg-white rounded-xl shadow-sm p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="font-bold text-lg">版本对比</h3>
                                <div class="flex items-center space-x-2">
                                    <div class="relative">
                                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                                            <option>苏教版 2022版</option>
                                            <option>北师大版 2023版</option>
                                            <option>沪科版 2024版</option>
                                        </select>
                                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                    </div>
                                </div>
                            </div>

                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">知识点</th>
                                            <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人教版 2023版</th>
                                            <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">苏教版 2022版</th>
                                            <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">差异分析</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">集合的定义</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">必修一 第一章 第1节</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">必修一 第一章 第1节</td>
                                            <td class="px-4 py-4 whitespace-nowrap">
                                                <span class="text-green-600 text-xs">内容一致</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">元素特性</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">强调确定性、互异性、无序性</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">增加"完备性"特性描述</td>
                                            <td class="px-4 py-4 whitespace-nowrap">
                                                <span class="text-yellow-600 text-xs">表述差异</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">常用数集</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">包含N、N*、Z、Q、R</td>
                                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">增加复数集C的介绍</td>
                                            <td class="px-4 py-4 whitespace-nowrap">
                                                <span class="text-red-600 text-xs">内容扩展</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>-->

        <!-- 相关资源推荐 -->
        <div class="bg-white rounded-xl shadow-sm p-6">
          <h2 class="text-xl font-bold text-gray-800 mb-4">相关资源推荐</h2>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 资源卡片1 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-blue-100 flex items-center justify-center">
                <i class="fa fa-video-camera text-5xl text-blue-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合的定义与性质</h3>
                <p class="text-sm text-gray-500 mb-3">15分钟视频课程，讲解集合的基本概念和元素特性</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">视频</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- 资源卡片2 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-green-100 flex items-center justify-center">
                <i class="fa fa-file-text-o text-5xl text-green-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合知识点总结与例题解析</h3>
                <p class="text-sm text-gray-500 mb-3">详细总结集合的知识点，并配有典型例题解析</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded-full">文档</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>

            <!-- 资源卡片3 -->
            <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
              <div class="h-40 bg-purple-100 flex items-center justify-center">
                <i class="fa fa-puzzle-piece text-5xl text-purple-300"></i>
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-800 mb-2">集合的定义 练习题</h3>
                <p class="text-sm text-gray-500 mb-3">50道针对性练习题，帮助巩固集合的定义相关知识</p>
                <div class="flex items-center justify-between">
                  <span class="text-xs bg-purple-100 text-purple-600 px-2 py-0.5 rounded-full">练习</span>
                  <button class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看 <i class="fa fa-angle-right ml-1"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>



                    </div>

                    <!-- 右侧信息面板 -->
                    <div class="lg:col-span-1 space-y-6">
                        <!-- 基本信息卡片 -->

                        <!-- 基本信息卡片 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="font-bold text-lg mb-4">基本信息</h3>

                            <div class="space-y-4">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">所属学科：</span>
                                    <span class="font-medium">数学</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">教材版本：</span>
                                    <span class="font-medium">人教版 2023版</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">章节位置：</span>
                                    <span class="font-medium">第一章 第1节</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">知识点编号：</span>
                                    <span class="font-medium">RJ-Math-1-1-1</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">创建时间：</span>
                                    <span class="font-medium">2023-09-10</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">最后更新：</span>
                                    <span class="font-medium">2024-03-15</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">创建人：</span>
                                    <span class="font-medium">王教授</span>
                                </div>

                                <div class="flex justify-between">
                                    <span class="text-gray-500">关联题目：</span>
                                    <span class="font-medium">3题</span>
                                </div>
                            </div>

                            <div class="mt-4 pt-4 border-t border-gray-100">
                                <h4 class="font-medium mb-2">教学目标</h4>
                                <div class="flex flex-wrap gap-2">
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded-full">掌握</span>
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">理解</span>
                                    <span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">应用</span>
                                </div>
                            </div>

                            <div class="mt-4 pt-4 border-t border-gray-100">
                                <h4 class="font-medium mb-2">学习难度</h4>
                                <div class="flex items-center">
                                    <div class="flex">
                                        <i class="fa fa-star text-yellow-400"></i>
                                        <i class="fa fa-star text-yellow-400"></i>
                                        <i class="fa fa-star-o text-gray-300"></i>
                                        <i class="fa fa-star-o text-gray-300"></i>
                                        <i class="fa fa-star-o text-gray-300"></i>
                                    </div>
                                    <span class="ml-2 text-sm text-gray-500">中等难度</span>
                                </div>
                            </div>
                        </div>

                        <!-- 统计信息卡片 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="font-bold text-lg mb-4">统计信息</h3>

                            <div class="space-y-4">
                                <div>
                                    <h4 class="text-sm font-medium text-gray-500 mb-2">题目分布</h4>
                                    <div class="h-64">
                                        <canvas id="questionChart"></canvas>
                                    </div>
                                </div>

                                <div>
                                    <h4 class="text-sm font-medium text-gray-500 mb-2">使用情况</h4>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>被试卷引用次数</span>
                                                <span class="font-medium">28次</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>学生平均掌握率</span>
                                                <span class="font-medium">82%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-green-500 h-2 rounded-full" style="width: 82%"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <div class="flex justify-between text-sm mb-1">
                                                <span>教师好评率</span>
                                                <span class="font-medium">94%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-blue-500 h-2 rounded-full" style="width: 94%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 操作卡片 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="font-bold text-lg mb-4">快速操作</h3>

                            <div class="space-y-3">
                                <button class="w-full py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                                    <i class="fa fa-plus mr-2"></i> 添加关联题目
                                </button>

                                <button class="w-full py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center">
                                    <i class="fa fa-copy mr-2"></i> 复制知识点
                                </button>

                                <button class="w-full py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center">
                                    <i class="fa fa-share-alt mr-2"></i> 分享知识点
                                </button>

                                <button class="w-full py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center">
                                    <i class="fa fa-history mr-2"></i> 查看历史版本
                                </button>

                                <button class="w-full py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center">
                                    <i class="fa fa-trash mr-2"></i> 删除知识点
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                </div>

                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });

        // 章节展开/收起
        document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
            item.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('i:last-child');

                content.classList.toggle('hidden');
                if (content.classList.contains('hidden')) {
                    icon.classList.remove('fa-angle-down');
                    icon.classList.add('fa-angle-right');
                } else {
                    icon.classList.remove('fa-angle-right');
                    icon.classList.add('fa-angle-down');
                }
            });
        });

        // 小节展开/收起
        document.querySelectorAll('.section-item > div:first-child').forEach(item => {
            item.addEventListener('click', function() {
                const content = this.nextElementSibling;
                content.classList.toggle('hidden');
            });
        });

        // 展开/收起所有章节
        document.getElementById('expand-all').addEventListener('click', function() {
            document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
                const content = item.nextElementSibling;
                const icon = item.querySelector('i:last-child');

                content.classList.remove('hidden');
                icon.classList.remove('fa-angle-right');
                icon.classList.add('fa-angle-down');
            });
        });

        document.getElementById('collapse-all').addEventListener('click', function() {
            document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
                const content = item.nextElementSibling;
                const icon = item.querySelector('i:last-child');

                content.classList.add('hidden');
                icon.classList.remove('fa-angle-down');
                icon.classList.add('fa-angle-right');
            });
        });

        // 知识点选择
        document.querySelectorAll('.knowledge-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.knowledge-item').forEach(i => {
                    i.classList.remove('bg-primary/5', 'border-l-2', 'border-primary');
                    i.querySelector('i').classList.remove('text-primary');
                    i.querySelector('i').classList.add('text-gray-400');
                });

                this.classList.add('bg-primary/5', 'border-l-2', 'border-primary');
                this.querySelector('i').classList.remove('text-gray-400');
                this.querySelector('i').classList.add('text-primary');
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });

        // 题目分布图表
        const ctx = document.getElementById('questionChart').getContext('2d');
        const questionChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['选择题', '填空题', '解答题', '应用题'],
                datasets: [{
                    data: [3, 2, 4, 1],
                    backgroundColor: [
                        '#165DFF',
                        '#36CBCB',
                        '#FF7D00',
                        '#722ED1'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12,
                            padding: 15
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.raw}题`;
                            }
                        }
                    }
                },
                cutout: '70%'
            }
        });
    </script>
</body>
</html>
